<template>
    <div class="section">
        <input :type="type" :placeholder="placeholder" :value="value" @input="change" @change="change" v-betterInput="betterInput">
        <img v-if="opened" class="eyeImg eyeOpened" src="/static/img/eyeOpened.png" @click="switchDo">
        <img v-else class="eyeImg eyeClosed" src="/static/img/eyeClosed.png" @click="switchDo">
    </div>
</template>
<script>
export default {
  data() {
    return {
      opened: false
    };
  },
  props: {
    value: null,
    placeholder: null,
    betterInput: {
      default: 0
    }
  },
  computed: {
    type() {
      return ["password", "text"][Number(this.opened)];
    }
  },
  methods: {
    change(e) {
      this.$emit("input", e.target.value);
    },
    switchDo() {
      this.opened = !this.opened;
    }
  }
};
</script>
<style lang="scss" scoped>
@import "../../asset/scss/mixin/export.scss";
.section {
  position: relative;
}
.inputLine {
  @include inputLine;
}
.inputCenter {
  @include inputCenter;
}
.inputLeft {
  @include inputLeft;
}
.eyeImg {
  position: absolute;
}
.eyeOpened {
  height: $pt20;
  top: $pt16;
  right: $pt30;
}
.eyeClosed {
  height: $pt14;
  top: $pt20;
  right: $pt28;
}
</style>


